Working with Properties

Why do you want to work with style sheets? So that you can make your pages look great (that's one important answer anyway). This is the bit about using style sheets to make your pages look great.

You'll remember from previous chapters that a style sheet is a series of statements. Each statement has a selector and a set of properties, called a declaration. It's the properties that give the visible style to a web page.

This chapter looks at properties. In it we learn about each of the properties editors, where you apply properties to selected statements. We will also learn about the different kinds of values (numbers, keywords, lengths and so on) that properties can take.

We do cover properties in detail in our Style Sheets Guide, which appears in the frame at the bottom of this page. This chapter of the manual is also heavily linked to the tutorial, so extra explanation is always at hand if you need it. In particular, the elements of the Properties Editors are individually linked to the relevant parts of the tutorial. Click on any part of the editor you need to clarify, and more information about that property will appear in the lower frame.

The Launcher

When you use Style Master, you'll see the launcher, a floating window that opens when you run the application. Using the launcher, you open or bring to the front the various property editors. You use these editors to edit the properties of a statement.

On this page, you can click the buttons on the launcher to go directly to an explanation of the editor it opens.

 

The Editors

Each property editor is a floating window which lets you edit a group of related properties. Below we will take a quick look at each editor, and the properties it helps you edit.

To edit the properties of a statement, remember, first you must select that statement in the list of statements in the style sheet window.

To open an editor, or bring an open editor to the front of the other editors

1a. click the button on the launcher for that editor

or

1b. choose the name of the editor you want to open from the Properties menu

or

1c. command-click one of the properties in the properties window item in the style sheet window. Style Master opens the appropriate editor for that property.

With Style Master editors, you can give a statement any value permitted by the standard, but you won't make mistakes, setting meaningless or problematic values.

Style sheet properties can only have certain types of value, and not all properties can sensibly have any one of these types of value. For example, it doesn't make sense to give a percentage value to the background color property, or to give a hex color value for the line height property, to take two extreme examples. With Style Master, you always set the same type of value in the same way, no matter what the property is. This means you only have to learn a few very simple techniques in order to use all of the editors.

Rather than laboriously going through each and every window item on the editors we've decided instead to give an indication of what properties are on which editors, and then to give a general description of each of the types of value, and how you create them using Style Master. Note too that Style Master features built in information on each of the properties.

To access Style Master's properties info

1. click the info button to the left of any property in an editor

2. the info window opens, detailing what the property is for, how it works and the values it can take

You'll notice that many Style Master properties are set to default types of value, units etc. These have been chosen on the basis of being more widely used, or appropriate to each particular property, but don't be frightened to tell us if you beg to differ. You'll probably also notice that some properties at first appear grayed out in the editors. This is because they are contingent upon other values according to the CSS spec.

You'll also notice comprehensive balloon help and the info button, explaining the permitted values, and giving as much information as possible about the property.

To turn on balloon help

1. choose Show Balloons from the Help menu

Special note: Each editor below is linked to our tutorial on style sheets. If you want more information on a property, just click its window item, and the relevant part of the tutorial will open in the frame below. Still don't have the tutorial? See Welcome for details on where to get it.

Text Style Editor

The Text Style editor lets you edit text style properties such as font, size, "style" (decoration such as underlined) and other related properties.

If you don't understand one of the properties in the Text Style Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

For help in setting the Color value, see our section Color Values below.

The Size property can have several types of value. To set the Size property first choose the type of value. For help doing this see our section Multiple Types of Value below.
If you are using a keyword, take a look at our section on Keyword Values.
If you are using a length, take a look at our section on Length Values.
If you are using a percentage, take a look at our section on Percentage Values.

 

Text Layout Editor

Style Sheets give you control over traditional text layout elements such as

The Text Layout editor lets you edit these properties

If you don't understand one of the properties in the Text Layout Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

Letter Spacing, Word Spacing, Line Height, Vertical Alignment and Text Indent are all set in a similar way, though they vary in terms of the actual values they can take.
For each of these properties you first choose the type of value. For help doing this see our section Multiple Types of Value below.
If you are using a keyword, take a look at our section on Keyword Values.
If you are using a length, take a look at our section on Length Values.
If you are using a percentage, take a look at our section on Percentage Values.

Background Editor

In traditional HTML pages only the whole page could have background color or images. With style sheets any element (for example a link) can have a background image or color, and other background properties.

The Background Editor lets you edit these properties.

If you don't understand one of the properties in the Background Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

For help in setting the Color value, see our section Color Values below.

To set the Image property you need to define the URL of the image you want to use. Either you can simply type the URL into the text field if you know it, or use Locate… from the the pop-up menu to the right to find it.

The Background Position property can have just a horizontal value, or both a horizontal and a vertical value. It cannot have only a vertical value.
The Background Position property can have several types of value. To set the Background Position property first choose the type of value. For help doing this see our section Multiple Types of Value below.
If you are using a keyword, take a look at our section on Keyword Values.
If you are using a length, take a look at our section on Length Values.
If you are using a percentage, take a look at our section on Percentage Values.

Margin Editor

With style sheets elements can have a margin around them. The margin is the distance between the element and the elements to its top, left, bottom, and right. Each of the top, left, right, and bottom margins can have a distinct value.

The margin editor lets you edit the values of each margin.

If you don't understand one of the properties in the Margin Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

For each side of the margin you first choose the type of value. For help doing this see our section Multiple Types of Value below.
If you are using a length, take a look at our section on Length Values.
If you are using a percentage, take a look at our section on Percentage Values.

 

Padding Editor

Elements can have padding within them. The padding is the distance between the border of the element, and its contents.

The padding editor lets you edit the top, left, bottom and right padding of an element.

If you don't understand one of the properties in the Padding Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

For each side of the padding you first choose the type of value. For help doing this see our section Multiple Types of Value below.
If you are using a length, take a look at our section on Length Values.
If you are using a percentage, take a look at our section on Percentage Values.

Border Editor

Elements can have borders of different styles, colors and widths. Each edge of a border can have different styles or widths.

The border editor lets you edit each of these borders individually or at once.

First, you must give the border a style. Only then can you give it a width and color.

If you don't understand one of the properties in the Border Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

The Border Width property can have several types of value. To set the Border Width property first choose the type of value. For help doing this see our section Multiple Types of Value below.
If you are using a keyword, take a look at our section on Keyword Values.
If you are using a length, take a look at our section on Length Values.

Display Type Editor

The display type properties are perhaps the most tricky to understand, as they have no real analogue on paper. In HTML, there are three basic types of element:

Each type of item flows differently on a page. Block items are separated from the elements around them by margin. Inline items flow inline. List items are separated like block elements, and have an optional bullet or number.

With style sheets, while elements have a default display type, you can alter the display type value. For instance, paragraphs might be made list items, or images might be made block items.

You can also edit the bullets and numbering of list items.

If you don't understand one of the properties in the Display Type Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

To set the List Style Image property you need to define the URL of the image you want to use. Either you can simply type the URL into the text field if you know it, or use the Locate… in the pop-up menu to the right to find it.

Page Layout Editor

Cascading Style Sheets also introduce "positioning". This is the ability to place elements anywhere on a page, stack them on top of each other, and to adjust other placement attributes, such as width and height. The Positioning Editor lets you edit each of these properties.

If you don't understand one of the properties in the Page Layout Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.

Many properties in this editor can have several types of value. To set such properties first you have to set what type of value you want to use. For help doing this see our section Multiple Types of Value below.
If you are using a length, take a look at our section on Length Values.
If you are using a percentage, take a look at our section on Percentage Values.

Editing Properties without Editors

If you are very familiar with the syntax of style sheets, you might find that from time to time it is tedious to have to use the property editors to edit properties. This might be particularly true if you want to copy an existing set of properties to a new statement. You can edit properties directly in the style sheet window. Here's how.

To edit the properties of a statement in the style sheet window

1. select the statement whose properties you want to edit from the list of statements on the left of the style sheet window

2. click in the field labeled Properties

3. type the property or properties, or paste a properties you've copied elsewhere into this field

4. when you exit this field (by clicking the list of statements, or switching to another window) the edited properties become the properties for this statement

Be careful here, this is a power feature. If you use a selector editor, you won't make syntax errors, but if you use this feature, the selector you create might be incorrect, which can cause havoc with your style sheets. Only use it if you are sure that the selector is correct. Style Master will try to make it correct, but it can't read minds.

Editing Values

Style sheet properties can have several different types of value. Not every property takes every type of value however. The editors only let you set the values permitted by the specification.

Multiple Types of Value

Where the specification permits more than one type of value for a property, you'll find a window item like this.

To choose the type of value to enter in this field

1. click the pop-up menu at the right of the field

Any possible type of value that the property can take will appear in this pop-up menu.

2. choose the type of value

The field changes to reflect the type of value you choose.

Below we discuss each of the type of value that properties may be able to take.

Keyword Values

Many properties can take a number of keyword values. The keywords vary from property to property. For more on Keyword Values, take a look at the Style Sheets tutorial.

Where a property takes a keyword value, Style Master provides a pop-up menu, which contains each of the possible keyword values.

To give the property a keyword value

1. choose the required keyword from the pop-up menu

 

Color Values

You can read about Color Values in detail in the Style Sheets Tutorial.

Colors can be specified in a number of ways in style sheets. Style Master lets you specify a color using any of these methods.

To choose the way in which you want to specify color

1. click the pop-up menu to the right of the window item and choose a keyword color value, or RGB or #.

The example above shows the window item in # (hexadecimal) mode.

Choosing a keyword value gives the property that value.

2. if you chose either RGB or #, enter a RGB or hexadecimal value in the field

You can also specify the color using the Macintosh color picker.

To use the color picker

1. click the color field next to the pop-up menu.

The Macintosh color picker opens.

2. use the color picker to choose the color you want, using any available color mode. Click OK

The hexadecimal value of the color you chose now appears in the # field, and the color appears in the color field.

Length Values

Lengths are generic units of measurement in style sheets. The have three parts

To set the sign of the length (if permissible)

choose + or - from the pop-up menu to the left of the window item. No value is treated as a +.

Style Master omits this menu where the sign may not be negative

To set the value of the length

1. type a numerical value into the field in the middle of the window item

To set the unit of the length value

1. choose the length value from the pop-up menu to the right of the value field

The pop-up menu to the right of the field lets you choose other value types. Most properties which take length values also take percentage and keyword values.

Percentage Values

Many properties can take percentage values. Style Master lets you easily give properties percentage properties where applicable.

Percentage values have two parts:

To set the sign of the percentage (if permissible)

1. choose + or - from the pop-up menu to the left of the window item.

Style Master omits this menu where the sign may not be negative

To set the value of the percentage

1. type a numerical value into the field in the middle of the window item

The pop-up menu to the right of the field lets you choose other value types. Most properties which take percentage values also take length and keyword values.

Next

Next we learn how to use Style Master to preview your style sheets in any number of browsers, while you are editing them.

welcome about style master creating style sheets selectors properties previewing linking

home to western civilisation